<!-- 币别选择列表 -->
<template>
	<uni-popup ref="share" type="top" :custom="true">
		<view :class="darkMode?'custom-dark':'custom-light'">
			<view>
				 <uni-nav-bar :fixed="true" color="#333333" :background-color="themeBgColor" :border="false" >
					<view class="input-view">
						<uni-icons type="search" size="22" color="#666666" />
						<input v-model="txtSearch" confirm-type="search" class="input" type="text" placeholder="搜索代码/名称" @confirm="searchNav">
						<uni-icons :color="'#999999'" v-if="txtSearch!==''" class="icon-clear" type="clear" size="22" @click="clearNav" />
					</view>
					<uni-icons :color="'#999999'" class="icon-close" type="close" size="30" @click="close" />
				 </uni-nav-bar>
			</view>
			<mescroll-uni :down="downOption" @init="mescrollInit"
			@emptyclick="downCallback" @down="downCallback" :bottom="-800"
			:up="upOption" @up="upCallback" :fixed="true">
				<view class="">
					<view v-for="item in cardList" :key="item.id">
						<uni-card is-full is-shadow @tapHeader="clickCard(item)">
							<view class="audit-card-content">
								<view class="uni-flex uni-row" @tap="clickCard(item)">
									<view class="flex-item-20">{{item.sign}}</view>
									<view class="flex-item-20">{{item.number}}</view>
									<view class="flex-item-60">{{item.name}}</view>
								</view>
							</view>
						</uni-card>
					</view>
				</view>
			</mescroll-uni>
		</view>
	</uni-popup>
</template>

<script>
	import {mapGetters} from 'vuex'
	import MescrollUni from "@/components/mescroll-uni/mescroll-uni.vue"
	import uniIcons from '@/components/uni-icons/uni-icons.vue'
	import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue'
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import {formatDateDay} from '@/utils/datetime.js'
	export default {
		props: {
			propSelItem: {},
		},
		components: {
			MescrollUni,
			uniIcons,
			uniNavBar,
			uniPopup,
		},
		computed: {
			...mapGetters(['themeBgColor', 'darkMode', 'user']),
		},
		data() {
			return {
				_uimainid: 599,//币别查询
				bgColor: '#FFFFFF',
				winHeight: "", // 窗口高度
				currentTab: 0, // 预设当前项的值
				scrollLeft: 0, // tab标题的滚动条位置
				txtSearch: '',
				mescroll: null,
				// 下拉刷新的常用配置
				downOption: {
					use: true, // 是否启用下拉刷新; 默认true	
					auto: true, // 是否在初始化完毕之后自动执行下拉刷新的回调; 默认true
				},
				// 上拉加载的常用配置
				upOption: {
					use: true, // 是否启用上拉加载; 默认true
					auto: true, // 是否在初始化完毕之后自动执行上拉加载的回调; 默认true
					page: {
						num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
						size: 15 // 每页数据的数量,默认10
					},
					noMoreSize: 5, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
					empty: {
						tip: '暂无相关数据'
					},
					toTop: {
						src: '/static/img/backtop.png'
					},
					textNoMore: '没有更多数据了',
				},
				cardList: [],
			}
		},
		filters: {
			dateFormate: function(v) {
				return formatDateDay(v);
			},
		},
		onReady() {
			// uni.setNavigationBarTitle({
			// 	title: this.$t('SaleOrder')
			// })
			this.setNavBarColor()
			this.setDarkMode()
		},
		watch: {
			themeBgColor() {
				this.setNavBarColor()
			},
			darkMode() {
				this.setDarkMode()
			}
		},
		onLoad() {
			//  高度自适应
			uni.getSystemInfo({
				success: res => {
					this.winHeight = res.windowHeight
					this.winWidth = res.windowWidth
				}
			})
		},
		onShow(e) {
			// setNavBar
			this.setNavBarColor()
			// pages
			let pages = getCurrentPages()
			let currPage = pages[pages.length - 1]
			if (currPage.isDoRefresh === true) {
				currPage.isDoRefresh = false
				this.searchNav()
			}
		},
		methods: {
			// mescroll组件初始化的回调,可获取到mescroll对象
			mescrollInit(mescroll) {
				// 如果this.mescroll对象没有使用到,则mescrollInit可以不用配置
				this.mescroll = mescroll;
				this.mescroll.formdata = {
					txtSearch: this.txtSearch,
				};
			},
			/*下拉刷新的回调, 有三种处理方式: */
			downCallback(mescroll) {
				// 第2种: 下拉刷新和上拉加载调同样的接口, 那以上请求可删, 直接用mescroll.resetUpScroll()代替
				mescroll.resetUpScroll() // 重置列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
			},
			/*上拉加载的回调*/
			upCallback(mescroll) {
				if (!this.user) {
					mescroll.endErr()
					return
				}
				// 此时mescroll会携带page的参数:
				mescroll.formdata._code = "M_CURRY_001";//币别查询
				mescroll.formdata.txtSearch= this.txtSearch,
				mescroll.formdata.pageindex = mescroll.num // 页码, 默认从1开始
				mescroll.formdata.pagesize = mescroll.size // 页码, 默认10
				this.$minApi.GetDataTable({
					data: mescroll.formdata
				}).then(res => {
					if (res.Status === 1) {
						// 接口返回的当前页数据列表 (数组)
						let curPageData = JSON.parse(res.Data);
						// 接口返回的总页数 (比如列表有26个数据,每页10条,共3页; 则totalPage值为3)
						let totalPage = 100 //res.data.length
						// 接口返回的总数据量(比如列表有26个数据,每页10条,共3页; 则totalSize值为26)
						let totalSize = 10000; //res.data.length
						// 接口返回的是否有下一页 (true/false)
						// let hasNext = res.hasNextPage

						if (mescroll.num == 1) this.cardList = [] //如果是第一页需手动置空列表
						this.cardList = this.cardList.concat(curPageData) //追加新数据

						// 成功隐藏下拉加载状态
						// 方法一(推荐): 后台接口有返回列表的总页数 totalPage
						mescroll.endByPage(curPageData.length, totalPage)
						this.$nextTick(() => {
							mescroll.endSuccess(curPageData.length)
						})
					} else {
						mescroll.endErr();
					}
				}).catch(exp => {
					// 失败隐藏下拉加载状态
					//console.log(exp);
					mescroll.endErr()
				})
			},
			clickCard(item) {
				this.close();
				this.$emit('updateSelect',item);
			},
			setDarkMode() {
				this.darkMode ? uni.setTabBarStyle({
					backgroundColor: '#2a2b2d'
				}) : uni.setTabBarStyle({
					backgroundColor: '#ffffff'
				})
			},
			setNavBarColor() {
				// navBar-bg-color
				uni.setNavigationBarColor({
					frontColor: '#ffffff',
					backgroundColor: this.themeBgColor,
					animation: {
						duration: 400,
						timingFunc: 'easeIn'
					}
				})
			},
			//头部搜框
			searchNav() {
				this.upCallback(this.mescroll);
			},
			clearNav() {
				this.txtSearch = ''
				this.searchNav()
			},
			close(){
				this.$refs.share.close();
			},
		},
	}
</script>
<style>
	.close {
		padding: 15px;
	}

	.scroll-view {
		/* #ifndef APP-NVUE */
		width: 100%;
		height: 100%;
		/* #endif */
		flex: 1
	}

	/* 处理抽屉内容滚动 */
	.scroll-view-box {
		flex: 1;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
	}


	.placeholder {
		color: #8c8c8c;
		line-height: 84rpx;
		font-size: 31rpx;
		-o-text-overflow: ellipsis;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
		width: 100%;
		text-align: right;
	}

	.my-uni-input {
		line-height: 84rpx;
		font-size: 31rpx;
		-o-text-overflow: ellipsis;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
		width: 100%;
		text-align: right;
	}

	.cu-form-group .time-content {
		-webkit-box-flex: 1;
		-webkit-flex: 1;
		-ms-flex: 1;
		flex: 1;
		padding-right: 33rpx;
		overflow: hidden;
		position: relative;
	}

	.cu-form-group .time-content::after {
		font-family: cuIcon;
		display: block;
		content: "\E6A3";
		position: absolute;
		font-size: 31rpx;
		color: #8799a3;
		line-height: 50rpx;
		width: 50rpx;
		text-align: center;
		top: 0;
		bottom: 0;
		right: -16rpx;
		margin: auto;
	}
	
	.cu-form-group picker::after {
		content: "";
	}
</style>
